<template>
  <div class="lackyDraw">
    <div class="list">
      <van-tabs class="van-tab-box" v-model="active" color="#01A0EF" @change="clickChange">
        <van-tab title="我参与的">
          <Nodata v-if="isNoData"></Nodata>
          <div v-else class="content-box">
            <van-list class="content-list" v-model="loading" :finished="finished" @load="onLoad" :offset="0">
              <van-cell v-for="item in dataList" :key="item.id" :border="false" class="van-cell-container">
                <div class="lacky-list" @click="openLink(item)">
                  <van-row type="flex" align="center">
                    <van-col>
                      <div class="list-img">
                        <img :src="item.file_path" v-if="item.file_path" width="100%" alt>
                      </div>
                    </van-col>
                    <van-col>
                      <div class="list-right">
                        <div class="right-header">{{item.active_title}}</div>
                        <div class="right-time">{{item.active_desc | text}}</div>
                        <div class="base">
                          <div class="base-text">开始时间：{{item.active_starttime}}</div>
                          <div class="base-text">结束时间：{{item.active_endtime}}</div>
                        </div>
                      </div>
                    </van-col>
                  </van-row>
                </div>
              </van-cell>
            </van-list>
          </div>
        </van-tab>
        <van-tab title="我的奖品">
          <div class="myPrize">
            <div class="content-box">
              <div class="prize">
                <Nodata v-if="isNoData"></Nodata>
                <van-list class="content-list" v-else v-model="loading" :finished="finished" @load="onLoad2" :offset="0">
                  <van-cell v-for="item in fetchData" :key="item.id">
                    <div v-if="!item.islucky">
                      <div class="prize-list">
                        <div class="left">
                          <img v-bind:src="item.item_path" width="100%" alt>
                        </div>
                        <div class="time">
                          <P class="name">{{item.item_name}}</P>
                          <p class="date">有效日期：{{item.create_time}}</p>
                        </div>
                      </div>
                    </div>
                  </van-cell>
                </van-list>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { drawMob_listMyDrow } from "@/api/drawMob";
import { listMyDrowItem } from "@/api/drawMob";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
export default {
  name: "MyPrize",
  components: { Nodata },
  data() {
    return {
      status: 1,
      medal: 2,
      total: "",
      active: 0,
      isNoData: false,
      loading: false,
      finished: false,
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId") || 1
      },
      dataList: [],
      fetchData: []
    };
  },
  methods: {
    openLink(e) {
      this.$router.push({ path: "/Trunplate1", query: { drawId: e.id } });
    },
    clickChange(index) {
      this.isNoData =  false
      this.active = index || 0;
      if (index == 0) {
        this.initList();
      }
      if (index == 1) {
        this.fetchList();
      }
    },
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let res = await drawMob_listMyDrow(query);
      if (res.data.status == 100) {
        this.dataList = res.data.data.rows;
        if (!res.data.data.rows.length) {
          this.isNoData = true
        }
      }
      this.loading = false;
      if (res.data.data.results <= res.data.data.rows.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    },
    async fetchList() {
      let query = Object.assign({}, this.listQuery);
      let res = await listMyDrowItem(query);
      if (res.data.status == 100) {
        this.fetchData = res.data.data.rows;
        if (!res.data.data.rows.length) {
          this.isNoData = true
        }
      }
      this.loading = false;
      if (res.data.data.results <= res.data.data.rows.length) {
        this.finished = true;
      }
    },
    onLoad2() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.fetchList();
      }, 1000);
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
@import "LuckyDraw";
@import "MyPrize";
</style>

